import React, { Component } from 'react';
import '../../style/ClassifyScss/mylist.scss'
import pic from '../../assets/pic.png'
class MyList extends Component {
    state = {
        currentIndex: 0,
        list: [
            { name: '活动专区', listScond: [{ namescond: '秒杀专场', listThird: [{ name: '八折好物', pic }, { name: '新人优惠', pic }, { name: '12点秒杀', pic }, { name: '男士香水', pic }] }] },
            { name: '品牌', listScond: [{ namescond: 'OSM', listThird: [{ name: '欧诗漫唇膏', pic }] }] },
            { name: '美容护肤', listScond: [{ namescond: '紧致肌肤', listThird: [{ name: '大宝SOD蜜', pic }] }] },
            { name: '彩妆', listScond: [{ namescond: '大牌彩绘', listThird: [{ name: '彩妆颜料', pic }] }] },
            { name: '香水', listScond: [{ namescond: '香水王国', listThird: [{ name: '海洋自然醇香', pic }] }] },
            { name: '酒类', listScond: [{ namescond: '欧洲果园', listThird: [{ name: 'XO', pic }] }] },
            { name: '腕表首饰', listScond: [{ namescond: '名牌腕表', listThird: [{ name: 'CSDIO', pic }] }] },
            { name: '服饰箱包', listScond: [{ namescond: 'Chanel', listThird: [{ name: '香奈儿', pic }] }] },
            { name: '食品保健', listScond: [{ namescond: '八折好物', listThird: [{ name: '盖中盖', pic }] }] }
        ]
    }
    handleClick(index) {
        this.setState({ currentIndex: index })
    }
    render() {
        return (
            <div className='content'>
                <div className="left">
                    {
                        this.state.list.map((item, index) => {
                            return <p key={index} onClick={() => { this.handleClick(index) }} className={this.state.currentIndex === index ? 'active' : ''}>{item.name}</p>
                        })
                    }
                </div>
                <div className="right">
                    {
                        this.state.list[this.state.currentIndex].listScond.map((item2, index) => {
                            return (
                                <div className="rightmid">
                                    <h4>{item2.namescond}</h4>
                                    <div className="rightList">
                                        {
                                            item2.listThird.map((item3, index) => {
                                                return (
                                                    <div className="divv" key={index}>
                                                        <img src={item3.pic} alt="" />
                                                        <div className="Name">{item3.name}</div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default MyList;